<template>
  <div class="app-container">
    <a-title @clickPreview="preview" />
    <el-row :gutter="20">
      <!--业务类别数据-->
      <el-col :span="5" :xs="24">
        <div class="head-container">
          <el-tree
            node-key="id"
            lazy
            :load="loadNode"
            :props="defaultProps"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
          >
          <span slot-scope="{ node, data }" class="custom-tree-node">
                <span :title="node.label+'('+data.counts+')'" style="display:inline-block;width: 100%;overflow:hidden;font-size:11px;">{{ node.label }}({{data.counts}})</span>
          </span>
            <!-- <span class="custom-tree-node" slot-scope="{ node }">
              <span>{{ node.label }}</span>
            </span>-->
          </el-tree>
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="19" :xs="24">
        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px">
          <el-form-item label="文件标题" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入文件标题"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="业务名称" prop="businessName">
            <el-input
              v-model="queryParams.businessName"
              placeholder="请输入业务名称"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="上传人" prop="publishPerson">
            <el-input
              v-model="queryParams.publishPerson"
              placeholder="请输入上传人"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="创建时间" prop="dateRange">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table
          stripe
          v-loading="loading"
          :data="dataList"
          @sort-change="tableSortChange"
          :default-sort="{prop: 'createTime', order: 'descending'}"
        >
          <el-table-column
            label="文件标题"
            align="left"
            prop="name"
            :sort-orders="['ascending', 'descending']"
            sortable="custom"
          />
          <el-table-column label="业务名称" align="left" prop="businessName" :sort-orders="['ascending', 'descending']" sortable="custom"/>
          <el-table-column label="附件" align="left">
            <template slot-scope="scope">
              <div v-for="item in scope.row.attachments" :key="item.id" class="fileTable">
                <el-tooltip class="item" effect="dark" :content="item.fileName" placement="top">
                  <div class="fileTableTr">{{ item.fileName }}</div>
                </el-tooltip>
                <!-- <a :href="item.storagePath" :download="item.fileName">下载</a> -->
                <a @click="downloadOne(item.fileId,item.fileName)">下载</a>
                <a @click="handlePreview(item)">预览</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="上传人"
            align="center"
            prop="publishPerson"
            :sort-orders="['ascending', 'descending']"
            sortable="custom"
          />
          <el-table-column
            label="上传时间"
            align="center"
            prop="createTime"
            :sort-orders="['ascending', 'descending']"
            sortable="custom"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <!-- 预览 -->
    <el-dialog :visible.sync="openPreview" width="80%">
      <iframe :src="manualPreviewUrl" frameborder="0" width="100%" height="700px"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import {
  fileQueryTree,
  pickupList,
  archiveListInDoc,
  businessDocList,
  businessDocListResult
} from '@/api/projectWorkbench/projectList/fileQuery';
import aTitle from '@/components/Title'
export default {
  name: 'FileQuery',
  components: { aTitle },
  data () {
    return {
      manualPreviewUrl: null,
      openPreview: false,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      dataList: [],
      dateRange: [],
      // 项目树选项
      treeData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        publishPerson: undefined,
        businessId: undefined,
        businessName: undefined
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      isvalid: false,
      isPickup: false,
      searchType: undefined,
    }
  },

  created () {
    this.getTreeselect()
    // this.getList()
    this.queryParams.catalogId = this.$route.params.id
    this.isvalid = sessionStorage.getItem("isvalid") === "1";
  },
  mounted(){
    document.title=document.getElementById("projectNameTitle").innerHTML;
  },
  methods: {
    preview () {
      this.openPreview = true;
      this.manualPreviewUrl = `${this.previewUrl}${encodeURIComponent(
        `${this.operationManual}项目主页/业务系统操作说明-项目主页-文档查询.xlsx`
      )}&name=${encodeURIComponent("业务系统操作说明-项目主页-文档查询.xlsx")}`;
    },
    /** 查询项目列表 */
    getList () {
      this.queryParams.type = this.searchType;
      businessDocList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        });

      /**if (this.searchType == "0") {
        this.loading = true;
        
        if (this.dateRange && this.dateRange.length == 2) {
          this.queryParams.docBeginTime = this.dateRange[0];
          this.queryParams.docEndTime = this.dateRange[1];
        } else {
          this.queryParams.docBeginTime = "";
          this.queryParams.docEndTime = "";
        }
        this.queryParams.createBy = this.queryParams.publishPerson;
        pickupList(this.queryParams).then(response => {
          this.dataList = response.rows;
          this.dataList.forEach(item => {
            item.publishPerson = item.pickUpPerson;
            if (item.pickUpDate) {
              var json_date = new Date(item.pickUpDate).toJSON();
              item.createTime = new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
            } else {
              item.createTime = "";
            }

          });
          this.total = response.total;
          this.loading = false;
        });
      } else if (this.searchType == "2") {
        this.loading = true;

        if (this.dateRange && this.dateRange.length == 2) {
          this.queryParams.docBeginTime = this.dateRange[0];
          this.queryParams.docEndTime = this.dateRange[1];
        } else {
          this.queryParams.docBeginTime = "";
          this.queryParams.docEndTime = "";
        }

        archiveListInDoc(this.queryParams).then(response => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      } else {
        this.loading = true;
        businessDocList(
          this.addDateRange(this.queryParams, this.dateRange)
        ).then(response => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;

          this.dataList.map(item =>{
            item.attachments.some(list=>{
              if(list.archiveStatus == '1' || list.archiveStatus == '2'){
                return item.status = true
              }
            })
          })
        });
      }*/
      // this.queryParams.catalogId = undefined;
    },
    /** 查询项目下拉树结构 */
    getTreeselect () {
      fileQueryTree({ projectId: this.$route.params.id }).then(res => {
        if (res.code === 200) {
          this.treeData = res.data;
        }
      })
    },
    handleNodeClick (node, data) {
      this.searchType = node.flag;
      if(node.flag === "0"||node.flag === "2"){
        this.queryParams.businessId = node.guid;
      }else{
        this.queryParams.catalogId = node.guid;
      }
      this.queryParams.type = this.searchType
      businessDocList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      /**if (node.flag === "0") {
        this.searchType = "0";
        this.loading = true;
        if (this.dateRange && this.dateRange.length == 2) {
          this.queryParams.docBeginTime = this.dateRange[0];
          this.queryParams.docEndTime = this.dateRange[1];
        } else {
          this.queryParams.docBeginTime = "";
          this.queryParams.docEndTime = "";
        }
        this.queryParams.createBy = this.queryParams.publishPerson;
        this.queryParams.businessId = node.guid;
        pickupList(this.queryParams).then(response => {
          this.dataList = response.rows;
          this.dataList.forEach(item => {
            item.publishPerson = item.pickUpPerson;
            if (item.pickUpDate) {
              var json_date = new Date(item.pickUpDate).toJSON();
              item.createTime = new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
            } else {
              item.createTime = "";
            }
          });
          this.total = response.total;
          this.loading = false;
        });
      } else if (node.flag === "2") {
        this.searchType = "2";
        this.loading = true;
        this.queryParams.businessId = node.guid;
        archiveListInDoc(this.queryParams).then(response => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      } 
      else if (node.flag === "3") {
        this.searchType = "1";
        this.queryParams.catalogId = node.guid;
        this.loading = true;
        businessDocListResult(
          this.addDateRange(this.queryParams, this.dateRange)
        ).then(response => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      } else {
        this.searchType = "1";
        this.queryParams.catalogId = node.guid;
        this.loading = true;
        businessDocList(
          this.addDateRange(this.queryParams, this.dateRange)
        ).then(response => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      }*/
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1
      //this.queryParams.page = 1;
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm('queryForm')
      this.dateRange = []
      // this.queryParams.createBy = undefined;
      this.handleQuery()
    },
    handlePreview (row) {
      this.filePreview(row.fileName, row.storagePath)
    },
    downloadOne (id, name) {
      this.downloadBlob(id, name)
    },
    tableSortChange (column) {
      this.queryParams.pageNum = 1;

      if (column.order === "descending") {
        this.queryParams.sortBy = column.prop;
        this.queryParams.order = "desc";
      } else {
        this.queryParams.sortBy = column.prop;
        this.queryParams.order = "asc";
      }
      this.getList();
    },
    loadNode(node, resolve){
      this.queryParams.level = node.level;
      this.queryParams.projectId = this.$route.params.id;
      if(node.data !== undefined){
        this.queryParams.catalogId = node.data.guid;
      }
      fileQueryTree(this.queryParams).then(res => {
          if (res.code === 200) {
            return resolve(res.data);
          }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.custom-tree-node {
  display: flex;
  flex: 1;
}

/deep/.el-table .cell {
  font-family: PingFangSC-Regular;
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: 0;
  a {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1890ff;
    letter-spacing: 0;
    text-align: right;
    line-height: 14px;
    margin: 5px;
  }
}
</style>

<style>
.el-tree-node.is-current > .el-tree-node__content {
    background-color: #a2baf4 !important;
    /*background-color: #617fc7 !important;
    background-color: #cde0fb !important;*/
    color: white;
  }
 
  .el-checkbox__input.is-checked+.el-checkbox__label {
    color: black;
}
</style>